// 部门(分公司)列表
<template>
    <div class="department-list">
        <Tree :data="companys" :render='renderContent'></Tree>
    </div>
</template>

<script lang='ts'>
import {Component, Prop,  Watch, Vue} from 'vue-property-decorator'
import selectItem from '../select_item.ts'
import {store} from '@/store/index'
const departmentItem  = () => import('@/components/ivew_components/organization_select/department_item/')


@Component({})
export default class departmentList extends Vue{
    name:string = 'departemnt-list'

    @Prop()
    companys:any[]
    
    currentData = {}
    
    // 箭头函数保证函数绑定上下文
    renderContent = (h, {root, node, data}) =>{

        
        let _vue = this
        
        // 设置初始选中值
        if(data.selected){
            _vue.currentData = data;
        }
        
        let item = h(departmentItem, {

            props:{
                data,
                selected: data.selected,
                btns:data.btns,
                type:data.type,
            },
            on:{
                select (currentData){

                    _vue.select(currentData);
                    _vue.currentData['selected'] = false;
                    _vue.currentData = data
                    data['selected'] = true; 
                    
                }
            }
            
        }) 

        return item

    }
    
    
    select(data){
        this.$emit('select', data) 
    }

}


</script>

<style lang='scss'>


.department-list{

    overflow: scroll;
    width: _rem(300px);
    height: 100%;

}




</style>